<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'e1b93e9730d1a02819c9d41e30a47da5',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=97e1969986cfdad21dd89813a23d5a28">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script>
        // https://lbs.amap.com/api/jsapi-v2/guide/overlays/vector-overlay
        let map = new AMap.Map('container', {
            // 中心
            center: [112.54, 37.85],
            // 缩放 (3, 20)
            zoom: 13,
            viewMode: '3D',
            pitch: 45
        })
        // 监听地图点击事件
        map.on('click', function (event) {
            alert(`点击经度为 ${event.lnglat.lng}, 纬度 ${event.lnglat.lat}`)

        })
        // 点击经度为 112.553357, 纬度 37.85804
        // 点击经度为 112.565934, 纬度 37.857631
        // 点击经度为 112.563703, 纬度 37.84944
        // 点击经度为 112.55341, 纬度 37.847776
        var path = [
            new AMap.LngLat(112.553357, 37.85804),
            new AMap.LngLat(112.565934, 37.857631),
            new AMap.LngLat(112.563703, 37.84944),
            new AMap.LngLat(112.55341, 37.847776)
        ];

        // 创建折线实例
        // var polyline = new AMap.Polyline({
        //     path: path,
        //     borderWeight: 2, // 线条宽度，默认为 1
        //     strokeColor: 'red', // 线条颜色
        //     lineJoin: 'round' // 折线拐点连接处样式
        // });
        // 将折线添加至地图实例
        // map.add(polyline);

        // 创建多边形
        // var polygon = new AMap.Polygon({
        //     path: path,
        //     fillColor: '#fff', // 多边形填充颜色
        //     borderWeight: 2, // 线条宽度，默认为 1
        //     strokeColor: 'red', // 线条颜色
        // })
        // map.add(polygon);

        // 创建圆形
        var circle = new AMap.Circle({
            center: new AMap.LngLat(112.553357, 37.85804), // 圆心位置
            radius: 1000, // 圆半径
            fillColor: 'red', // 圆形填充颜色
            strokeColor: '#fff', // 描边颜色
            strokeWeight: 2, // 描边宽度
        });
        map.add(circle)

    </script>
</body>

</html>